<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条功能</title>
</head>
<style>
    .fa{
        width: 600px;
        margin-bottom: 30px;
        border: 1px solid #f20505;
    
    }

    .son{
        width:0px;
        height: 40px;
        background: #399d20;
        text-align: center;
        line-height: 40px;

    }

</style>
<body>
    <div class="fa">
        <div class="son">
            <span>0</span><span>%</span>
        </div>
  </div>
  <button id="but">安装</button>
  <script>
    let   butt = document.getElementById('but');
    let   tt = document.getElementsByTagName('div');
    let  span = document.getElementsByTagName('span')
    let  timer = null;
    butt.onclick = function(){
        let  num  = 0;
        if(timer ==null){
             timer =  setInterval(() => {
            num += 10;
            tt[1].style.width = num +'px';
            span[0].innerText = Math.ceil(num/600*100);
            if(num ==600){
                clearInterval(timer);
            }
        }, 10);
        }

        
    }

  </script>

    
</body>
</html>